<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
  >
    <template v-if="!loading">
      <main-navbar />
      <div class="site-content-wrapper">
        <main-sidebar />
        <el-container>
          <el-main>
            <el-card class="kxy-card">
              <router-view />
            </el-card>
          </el-main>
        </el-container>
      </div>
    </template>
  </div>
</template>

<script>
import MainNavbar from "./main-navbar";
import MainSidebar from "./main-sidebar";
// import MainContent from './main-content'

export default {
  data() {
    return {
      loading: true
    };
  },
  components: {
    MainNavbar,
    MainSidebar
    // MainContent
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight;
      },
      set(val) {
        this.$store.commit("common/updateDocumentClientHeight", val);
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      }
    },
    userId: {
      get() {
        return this.$store.state.user.id;
      },
      set(val) {
        this.$store.commit("user/updateId", val);
      }
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
      set(val) {
        this.$store.commit("user/updateName", val);
      }
    }
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
    this.resetDocumentClientHeight();
  },
  methods: {
    // 重置窗口可视高度
    resetDocumentClientHeight() {
      this.documentClientHeight = document.documentElement["clientHeight"];
      window.onresize = () => {
        this.documentClientHeight = document.documentElement["clientHeight"];
      };
    },
    // 获取当前管理员信息
    getUserInfo() {
      this.$http({
        url: this.$http.adornUrl("/sys/user/info"),
        method: "post",
        data: { userId: this.$cookie.get("userId") }
      }).then(data => {
        if (data && data.code === 200) {
          this.loading = false;
          this.userId = data.data.userId;
          this.userName = data.data.username;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.site-wrapper > .site-content-wrapper {
  display: flex;
  width: 100%;
  min-height: 850px;
  height: calc(100% - 50px);
  overflow: auto;
  background-color: #f5f5f5;
  z-index: 99999;
}
</style>
